<!--  -->
<template>
    <div class="search">
        <div class="top_nav_box" >
            <van-icon class="left_box" name="arrow-left" @click='onClickLeft'/>
            <van-search
                v-model="keyword"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                >
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
</van-search>
</div>
<van-tabs type="card" @click="changeTab">
    <van-tab title="推荐" name=''></van-tab>
    <van-tab title="新品" name="new"></van-tab>
    <van-tab title="价格" name="price"></van-tab>
</van-tabs>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <div class="product-item" v-for="(item, index) in list" :key="index" @click="productDetail(item)">
            <img :src="item.goodsCoverImg" />
            <div class="product-info">
                <p class="name">{{item.goodsName}}</p>
                <p class="subtitle">{{item.goodsIntro}}</p>
                <span class="price">￥ {{item.sellingPrice}}</span>
            </div>
        </div>
    </van-list>
</van-pull-refresh>
</div>
</template>

<script>
    import {
        EditUserInfo,
        logout,
        getUserInfo,
        search
    } from '@/api/index';
    import {
        Dialog,
        Toast
    } from "vant";
    import md5 from "js-md5";
    export default {
        data() {
            return {
                refreshing: false,
                count: 0,
                list: [],
                loading: false,
                finished: false,
                orderBy: '', //标签分类
                keyword: '',
                page: 1,
                totalPage: 0,
                productList: [],
            }

        },
        created() {
            // this.user = JSON.parse(localStorage.getItem("userData"));
            // console.log(JSON.parse(localStorage.getItem("userData")))
        },
        mounted() {
            this.init();
        },

        methods: {
            async init() {
                const {
                    categoryId,
                    from
                } = this.$route.query;
                if (!categoryId && !this.keyword) {
                    this.finished = true;
                    this.loading = false;
                    return
                }
                console.log(categoryId)
                const {
                    data,
                    data: {
                        list
                    }
                } = await search({
                    pageNumber: this.page,
                    goodsCategoryId: categoryId,
                    keyword: this.keyword,
                    orderBy: this.orderBy
                })
                this.list = this.list.concat(list)
                this.totalPage = data.totalPage;
                this.loading = false;
                if (this.page >= data.totalPage) this.finished = true;
                console.log(this.list)

            },
            onClickLeft() {
                this.$router.back()
            },
            onSearch() {
                this.onRefresh();
            },
            onRefresh() {
                this.refreshing = true;
                this.loading = true;
                this.finished = false;
                this.page = 1;
                this.onLoad();

                // setTimeout(() => {
                //     Toast('刷新成功');
                //     this.count++;
                // }, 1000);
            },
            onLoad() {
                if (!this.refreshing && this.page < this.totalPage) {
                    this.page = this.page + 1;
                }
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                this.init();
            },
            changeTab(name, title) {
                // console.log(name)
                this.orderBy = name;
                this.onRefresh()
            },

        }
    }
</script>
<style lang='less' scoped>
    @import '../assets/style/mixin.less';
    .search {
        .top_nav_box {
            display: flex;
            width: 100%;
            height: 50px;
            align-items: center;
            .left_box {
                width: 10%;
                background: transparent;
            }
            .van-search {
                width: 90%;
                padding: 10px 3px;
            }
        }
        .van-tabs__nav--card {
            border: 1px solid #1baeae;
            .van-tabs__nav--card .van-tab.van-tab--active {
                color: #fff;
                background-color: #1baeae;
            }
            .van-tabs__nav--card .van-tab {
                color: #1baeae;
                border-right: 1px solid #1baeae;
            }
            .van-tabs__nav--card .van-tab {
                color: #1baeae;
                border-right: 1px solid #1baeae;
            }
        }
        .product-list-refresh {
            /* margin-top: 78px; */
            .product-item {
                .fj();
                width: 100%;
                height: 120px;
                padding: 10px 0;
                border-bottom: 1px solid #dcdcdc;
                img {
                    width: 140px;
                    height: 120px;
                    padding: 0 10px;
                    .boxSizing();
                }
                .product-info {
                    width: 56%;
                    height: 120px;
                    padding: 5px;
                    text-align: left;
                    .boxSizing();
                    p {
                        margin: 0
                    }
                    .name {
                        width: 100%;
                        max-height: 40px;
                        line-height: 20px;
                        font-size: 15px;
                        color: #333;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .subtitle {
                        width: 100%;
                        max-height: 20px;
                        padding: 10px 0;
                        line-height: 25px;
                        font-size: 13px;
                        color: #999;
                        overflow: hidden;
                    }
                    .price {
                        color: @primary;
                        font-size: 16px;
                        /* color: #1baeae; */
                    }
                }
            }
        }
    }
</style>